<template>
    <div class="max-box">
        <div class="header-box">
            <div class="header-left">
                <span>维保记录</span>
            </div>
            <a-input-search
                placeholder="输入标题查询"
                @search="onSearch"
                allow-clear
                class="search-box">
                <a-button slot="enterButton" icon="search"></a-button>
            </a-input-search>
            <a-button type="primary" class="add-btn" @click="openCenterDrawer">添加维保记录</a-button>
        </div>
        <div class="content-box">
            <div class="table-container">
                <MaintenanceTable
                    :data="tableData"
                    :total="total"
                    @requestTable="getLabelList"
                ></MaintenanceTable>
            </div>
        </div>
        <!--添加维保记录-->
        <add-maintenance :top-drawer="topDrawer" @closeAddMaintenance="closeAddMaintenance"></add-maintenance>
    </div>
</template>

<script>
import MaintenanceTable from "@/views/maintenance/components/MaintenanceTable";
import {queryMaintenanceList} from "@/api/maintenance";
import AddMaintenance from "@/views/maintenance/components/AddMaintenance";
export default {
    name: "maintenance",
    components: {AddMaintenance, MaintenanceTable},
    data() {
        return {
            tableData: [],
            total: 0,
            visible: false,
            topDrawer: false,
        }
    },
    methods: {
        onSearch() {
        },
        getLabelList( data ) {
            let requestData = {
                page: 1,
                limit: 50,
            };
            if ( data ) {
                requestData.page = data.page;
                requestData.limit = data.pageSize;
            }
            queryMaintenanceList ( data ).then ( ( res ) => {
                this.tableData = res.data;
                this.total = res.count;
            } );
        },
        // 打开弹框
        openCenterDrawer() {
            this.topDrawer = true;
        },
        closeAddMaintenance(){
            console.log('关闭抽屉')
            this.topDrawer = false
        }
    },
    mounted() {
        this.getLabelList ()
    }
}
</script>


<style lang="less" scoped>
.max-box {
    width: 100%;
    padding-top: 16px;
    padding-right: 20px;
    box-sizing: border-box;
    .header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        .header-left {
            span {
                font-size: 18px;
                color: #252b3a;
            }
            i {
                font-size: 20px;
            }
        }
        .search-box {
            width: 240px;
            height: 32px;
            /deep/ .ant-input {
                font-size: 12px;
            }
        }
        .add-btn {
            font-size: 12px;
        }
    }
    .content-box {
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        .tarbar-box {
            padding-bottom: 12px;
            position: relative;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            .tabs {
                display: flex;
                padding-left: 16px;
                align-items: center;
                .tab-one {
                    padding: 12px 0 8px 0;
                    margin-right: 24px;
                    font-size: 12px;
                    cursor: pointer;
                    color: #515561;
                }
                .open-choose {
                    margin-top: 3px;
                    cursor: pointer;
                    padding-left: 16px;
                    border-left: 1px solid rgba(0, 0, 0, 0.1);

                    &:hover {
                        color: #048fff;
                    }

                    span {
                        margin-right: 1px;
                    }

                    transition: all 1s;
                }
                .active-choose {
                    color: #048fff;

                    .icon-down {
                        transform: rotate(180deg);
                    }
                }
                .active-tab {
                    color: #048fff;
                    border-bottom: 2px solid #048fff;
                }
            }
        }
        .table-container {
            width: 100%;
            // height: 600px;
            background: #fff;
            display: flex;
        }
    }
}
</style>
